import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:znmm/UI/A_Common/buttons/counter_button.dart';
import 'package:znmm/UI/A_Common/color_picker.dart';
import 'package:znmm/UI/A_Common/image_banner_slider.dart';
import 'package:znmm/UI/A_Common/image_selector.dart';
import 'package:znmm/UI/A_Common/size_selector.dart';
import 'package:znmm/UI/A_Common/star_rating_bar.dart';
import 'package:znmm/UI/utils/my_global.dart';
import 'package:znmm/config/app_color.dart';
import 'package:znmm/config/app_extension.dart';
import '../../../config/app_style.dart';
import '../../ProductPages/model/product_model.dart';

class ShoppingPage extends StatefulWidget {
  final ProductModel product;
  const ShoppingPage({Key? key, required this.product}) : super(key: key);

  @override
  _ShoppingPageState createState() => _ShoppingPageState();
}

class _ShoppingPageState extends State<ShoppingPage> {
  // final List<String> productImages = [
  //   'https://sms.pintreel.com/images/categories/个人护理.jpg',
  //   'https://sms.pintreel.com/images/categories/农业机械类.jpg',
  //   'https://sms.pintreel.com/images/categories/办公文具.jpg',
  //   'https://sms.pintreel.com/images/categories/卫浴.jpg',
  //   'https://sms.pintreel.com/images/categories/家居装饰.jpg',
  //   'https://sms.pintreel.com/images/categories/休闲用品.jpg',
  // ];

  @override
  Widget build(BuildContext context) {
    double fPand = 10.0;

    return Scaffold(
      bottomNavigationBar: bottomBar(),
      appBar: MyGlobal.getNavigationBar(context, "Shopping"),
      backgroundColor: AppColor.backgroundColor,
      body: SingleChildScrollView(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          ImageBannerSlider(productImages: widget.product.imagesList),
          ImageSelector(
            productImages: widget.product.imagesList,
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(fPand, 15, fPand, 0),
            child: Text(widget.product.slug,
                    style: h5Style.copyWith(
                        fontSize: 18, fontWeight: FontWeight.w500))
                .fadeAnimation(0.8),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(fPand, 15, fPand, 0),
            child: Text(widget.product.title,
                style: h5Style.copyWith(
                  fontSize: 14,
                )).fadeAnimation(0.8),
          ),
          Padding(
              padding: EdgeInsets.fromLTRB(fPand, 10, fPand, 0),
              child: _producScore(widget.product)),
          Padding(
            padding: EdgeInsets.fromLTRB(fPand, 10, fPand, 0),
            child: Row(
              children: [
                Text(widget.product.price,
                        style:
                            h5Style.copyWith(fontSize: 16, color: Colors.red))
                    .fadeAnimation(0.8),
                SizedBox(
                  width: 10.sp,
                ),
                const Text(
                  r"$307.00",
                  style: TextStyle(decoration: TextDecoration.lineThrough),
                ).fadeAnimation(0.8)
              ],
            ),
          ),
          Padding(
              padding: EdgeInsets.fromLTRB(fPand, 10, fPand, 0),
              child: Row(
                children: [
                  Text(
                    "Color",
                    style: h3Style.copyWith(fontSize: 16),
                    textAlign: TextAlign.end,
                  ),
                  Expanded(child: ColorPicker(widget.product.colors)),
                ],
              )).fadeAnimation(1.0),
          Padding(
              padding: EdgeInsets.fromLTRB(fPand, 10, fPand, 0),
              child: Row(
                children: [
                  Text(
                    "Qty",
                    style: h3Style.copyWith(fontSize: 16),
                  ).fadeAnimation(0.8),
                  CounterButton(
                    //label: widget.product.quantity,
                    onIncrementSelected: (int iQty) {},
                    onDecrementSelected: (int iQty) {},
                  ).fadeAnimation(0.8)
                ],
              )),
          Padding(
              padding: EdgeInsets.fromLTRB(fPand, 15, fPand, 0),
              child: Row(
                children: [
                  Text(
                    'SIZE',
                    style: h3Style.copyWith(fontSize: 16),
                  ).fadeAnimation(0.8),
                  Expanded(
                      child: SizeSelector(
                    sizes: const ['XS', 'S', 'M', 'L', 'XL', 'XXL'], // 你的尺码列表
                    onSizeSelected: (String selectedSize) {
                      // 处理选定的尺码
                    },
                  ).fadeAnimation(0.8)),
                ],
              )),
          Padding(
              padding: EdgeInsets.fromLTRB(fPand, 15, fPand, 0),
              child: Row(
                children: [
                  Text(
                    'LENGTH',
                    style: h3Style.copyWith(fontSize: 16),
                  ).fadeAnimation(0.8),
                  Expanded(
                      child: SizeSelector(
                    sizes: const [
                      '1',
                      '2',
                      '3',
                      '4',
                    ],
                    onSizeSelected: (String selectedSize) {
                      // 处理选定的尺码
                    },
                  ).fadeAnimation(0.8)),
                ],
              )),
        ],
      )),
    );
  }

  Widget bottomBar() {
    return Container(
      padding: const EdgeInsets.all(15),
      height: 90,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const FittedBox(
                child: Text(
                  'Price',
                  style: TextStyle(
                    color: Colors.black45,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              const SizedBox(height: 5),
              FittedBox(
                  child: Text("\$${widget.product.price}", style: h2Style))
            ],
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.orange,
              padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
            ),
            onPressed: () {},
            child: const Text(
              "Add to cart",
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),
          )
        ],
      ),
    ).fadeAnimation(1.3);
  }

  Widget _producScore(ProductModel product) {
    return Row(
      children: [
        StarRatingBar(score: product.score),
        const SizedBox(width: 10),
        Text(product.score.toString(), style: h4Style),
      ],
    ).fadeAnimation(1.0);
  }
}
